<template>
  <div class="table">
    <el-table
      :data="data"
      :height="height"
      tooltip-effect="dark"
      default-expand-all
    >
      <el-table-column
        v-for="(item, index) in column"
        :key="index"
        :type="item.type"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :align="item.align"
        show-overflow-tooltip
      >
        <template #header="{column}">
          <div style="font-weight: bold;color: #159AFF">{{column.label}}</div>
        </template>
        <template v-if="item.slot" v-slot="{row}">
          <slot :name="item.prop" :item="row"></slot>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'TableList',
  props: {
    column: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    height: {
      type: Number,
      default: 400
    },
    loading: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="scss" scoped>
.table {
  ::v-deep .el-table, .el-table__expanded-cell {
    background-color: transparent;
  }

  ::v-deep .el-table {
    tr {
      background-color: transparent;
      color: #fff;
    }

    th {
      background-color: transparent;
      color: #fff;
    }

    .el-table__cell {
      padding: 8px 0;
    }

    .el-table__expand-icon, .el-table__expand-icon--expanded {
      color: #00E6FF;
    }

    .el-table__cell {
      background-color: transparent;
    }

    .el-table__body-wrapper {
      overflow-x: hidden;
    }


    tbody {
      tr {
        &:hover {
          > td {
            background-color: transparent
          }
        }
      }
    }
  }

  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 120px;
    }

    span {
      color: #bbb;
      line-height: 40px;
    }
  }
}
</style>
